import React, { useEffect, useState } from 'react';
import { getHospitalList, getUpdateStatus } from "@/api/hosp";
import { Button, Form, Input, message, Space,Select, Switch, Table} from "antd";
import { useNavigate } from "react-router-dom";
import { changeParams, deleteBatchMoveAsync, getHospitalSetAsync } from "@/store/slice/hosp";
import { SearchOutlined } from "@ant-design/icons";
import { getFindByParentId } from '@/api/dict';


const {Option} = Select;
function HospitalList() {
    const navigate = useNavigate();
    const [hospitalList, setHospitalList] = useState([]);
    const [pageInfo, setPageInfo] = useState({
        current: localStorage.getItem("current") ? parseInt(localStorage.getItem("current") as string) : 1,
        pageSize: 4,
        total: 10
    })
    const [loading, setLoading] = useState(false);
    const getHospitalListAsync = async function (current: number, pageSize: number) {
        setLoading(true);
        console.log(form.getFieldsValue());

        const result = await getHospitalList(current, pageSize, form.getFieldsValue());
        localStorage.setItem("current", result.data.number + 1);
        setPageInfo({
            pageSize: result.data.size,
            current: result.data.number + 1,
            total: result.data.totalElements
        })
        setHospitalList(result.data.content);
        setLoading(false);
    }

    // 定义医院类型
    const [hostypeList,setHostypeList] = useState([]);
    // 定义省份列表
    const [provinceCodeList,setProvinceCodeList] = useState([]);
    // 定义城市列表
    const [cityCodeList,setCityCodeList]  = useState([]);
    // 定义区域列表
    const [districtCodeList,setDistrictCodeList] = useState([]);

    useEffect(() => {
        // 条用医院列表
        getHospitalListAsync(pageInfo.current, pageInfo.pageSize)
        // 找到医院类型
        getFindByParentId(10000).then(value=>{
            setHostypeList(value.data);
        })
        // 找到省份列表
        getFindByParentId(86).then(value=>{
            setProvinceCodeList(value.data);
        })
    }, [])
    const [form] = Form.useForm();
    return (
        <div>
            <Space style={{ marginBottom: 16 }}>
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={(values: any) => {
                        getHospitalListAsync(1, pageInfo.pageSize)
                    }}
                    autoComplete="off"
                    layout={"inline"}
                >   
                                        <Form.Item name={"provinceCode"}>
                        <Select onChange={async (value)=>{
                            const result = await getFindByParentId(value);
                            form.setFieldsValue({
                                cityCode:undefined,
                                districtCode:undefined
                            })
                            setCityCodeList(result.data);
                            setDistrictCodeList([])
                        }} placeholder={"请选择省份"}>
                            {
                                provinceCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"cityCode"}>
                        <Select onChange={async value=>{
                            const result = await getFindByParentId(value);
                            form.setFieldsValue({
                                districtCode:undefined
                            })
                            setDistrictCodeList(result.data);
                        }} placeholder={"请选择城市"}>
                            {
                                cityCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"districtCode"}>
                        <Select placeholder={"请选择区"}>
                            {
                                districtCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>


                    <Form.Item name={"hostype"}>
                        <Select placeholder={"请选择医院类型"}>
                            {
                                hostypeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder={"请输入医院名称"} />
                    </Form.Item>
                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder={"请输入医院编码"} />
                    </Form.Item>

                    <Form.Item>
                        <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={() => {
                            form.resetFields();// 重置表单
                            getHospitalListAsync(1, pageInfo.pageSize);
                        }} htmlType="button">
                            重置
                        </Button>
                    </Form.Item>
                </Form>

            </Space>
            <Table
                loading={loading}
                bordered={true}
                rowKey={"id"}
                pagination={{
                    ...pageInfo,
                    onChange: getHospitalListAsync,
                }}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(value, rows, index) {
                            return index + 1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        dataIndex: "hosname"
                    }, {
                        title: "医院编码",
                        align: "center",
                        dataIndex: "hoscode"
                    }, {
                        title: "医院LOGO",
                        align: "center",
                        dataIndex: "logoData",
                        render(logoData) {
                            return (
                                <img width={50} src={"data:image/png;base64," + logoData} alt="" />
                            )
                        }
                    }, {
                        title: "是否上线",
                        align: "center",
                        render(rows) {
                            return (
                                <Switch onChange={async () => {
                                    await getUpdateStatus(rows.id, rows.status === 1 ? 0 : 1);
                                    await getHospitalListAsync(pageInfo.current, pageInfo.pageSize);
                                }} checked={rows.status === 1}></Switch>
                            )
                        }
                    }, {
                        title: "医院等级",
                        align: "center",
                        dataIndex: "param",
                        render({ hostypeString }) {
                            return hostypeString;
                        }
                    }, {
                        title: "医院地址",
                        align: "center",
                        dataIndex: "param",
                        render({ fullAddress }) {
                            return fullAddress;
                        }
                    }, {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "createTime"
                    }, {
                        title: "操作",
                        align: "center",
                        // dataIndex: "id",
                        fixed: "right",
                        render(rows) {
                            return (
                                <Space>
                                    <Button onClick={() => {
                                        navigate("/hospital/show/" + rows.id)
                                    }} type={"primary"}>查看</Button>
                                    <Button onClick={() => {
                                        navigate("/hospital/department/"+rows.hoscode)
                                    }} type={"primary"}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                scroll={{
                    x: 1500
                }}
                dataSource={hospitalList}
            >

            </Table>
        </div>
    );
}

export default HospitalList;